<template>
	<view>
		<cu-custom bgColor="bg-blue" :isBack="true">
			<block slot="backText">返回</block>
			<block slot="content">区域服务</block>
		</cu-custom>
		<view  class="scroll-outer" v-if="!showNull" :style="style">
			<view  class="scroll">
				<scroll-view scroll-y="true" >
					<view :class="{'changeColor':tabIndex==index}"  @click="changeTab(index,item)" class="scroll_inner" v-for="(item,index) in tabList" :key="index">
						<view>{{item.name}}</view>
					</view>
				</scroll-view>
			</view>
			<view class="scroll_rig" >
				<view v-for="(item,index) in roomList" class="scroll_rig_inner" @click="gotodeatils(item)" :key="index">
					<view class="person_rig">
						<view class="person_tp">
								{{item.name}}
						</view>
						<view class="person_icon">
							<text class="lg text-gray cuIcon-right" ></text> 
						</view>
					</view>
				</view>
			</view>
		</view>
		<view v-if="showNull" class="no-data">
			<view class="inner">
				暂无数据信息
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				showNull:false,//暂无数据信息
				tabIndex:0,//左侧tab
				tabList:[],//区域
				roomList:[],//服务点
				teamId:'',//班组id
				CustomBar:this.CustomBar,
				screenHeight:this.screenHeight
			}
		},
		onLoad() {
			this.teamId = uni.getStorageSync('teamId')
			this.getAreaList();
		},
		computed: {
			style() {
				var customBar= this.CustomBar;
				var screenHeight= this.screenHeight;
				var height = screenHeight - customBar
				var style = `height:${height}px;`;
				return style
			}
		},
		methods: {
				// 楼层区域
				getAreaList(){
					this.$http('/care-service/areaService/getMyAreaList','get',{teamId:this.teamId}).then(res=>{
						if(res.data.code==200){
							this.tabList = res.data.data;
							if(this.tabList.length==0){
								this.showNull = true;
							}else{
								this.changeTab(0,this.tabList[0]);
							}
						}
					})
				},			
				changeTab(index,item){
					if(this.$store.state.state&&this.$store.state.isphone){
						getApp().globalData.TTSSpeaker.stop();
						getApp().globalData.TTSSpeaker.speak(item.name,1);
					}	
					this.tabIndex = index;
					this.$http('/care-service/areaService/getMySiteList','get',{teamId:this.teamId,areaId:item.id}).then(res=>{
						if(res.data.code==200){
							const data = res.data.data;
							this.roomList = data
						}
					})
				},
				gotodeatils(item){
					if(this.$store.state.state&&this.$store.state.isphone){
						getApp().globalData.TTSSpeaker.stop();
						getApp().globalData.TTSSpeaker.speak(item.name,1);
					}
					uni.navigateTo({
							url:"/pages/basics/regional/detail?id="+item.id
					})
				}
		}
	}
</script>
<style scoped lang="scss">
	.no-data{
		background-color: #FFFFFF;
		padding: 30rpx;
		.inner{
			color: #666;
			justify-content: center;
			display: flex;
			align-items: center;
			font-size: 32rpx;
		}
	}
	page{
			background-color: #f2f2f2;
		}
		.scroll_inner{
			height:100rpx;
			display: flex;
			justify-content: center;
			align-items: center;
		}
		.scroll-outer{
			display: flex;
			height:100vh;
		}
		
		.scroll{
			background-color: #F2F2F2;
			flex: 1;
		}
		.changeColor{
			background-color:#FFFFFF;
		}
		.scroll_rig{
			background-color:#FFFFFF;
			display: flex;
			flex-direction: column;
			flex: 2;
			padding: 0 20rpx;
			width: 100%;
			height:100%;
			.person_img{
				image{
					width:120rpx;
					height: 120rpx;
				}
			}
			.person_rig{
				margin-left:20rpx;
				display: flex;
				flex:1;
				justify-content: space-between;
				align-items: center;
			}
			.person_bt{
				font-size:28rpx;
				.right{
					margin-right: 12rpx;
				}
			}
			.person_tp{
				height: 100%;
				padding-bottom: 6rpx;
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				align-items: flex-start;
			}	
		}
		.person_icon{
			text{
				font-size:40rpx;
			}
		}
		.cu-tag{
			height: 36rpx;
			margin: 0 15rpx;
		}
		.scroll_rig_inner{
			padding: 20rpx 0;
			display: flex;
			border-bottom: 1rpx solid #ccc;
		}

</style>
